<template>
  <div class="school">
    <div class="banner">
      <img src="https://assets-cdn.lanqb.com/imgv3_m/images/t-banner.png" alt="">
    </div>
    <div class="menu">
      <span v-for="item in fontList" :key="item.title">
        <img :src="`https://assets-cdn.lanqb.com/imgv3_m/images-icon/${item.src}`" alt="">
        <p>{{item.title}}</p>
      </span>
    </div>
    <School-title Schooltitle="网校课程"></School-title>
    <School-class :ClassList="ClassList"></School-class>
    <School-title Schooltitle="优秀师资"></School-title>
    <School-teach :teacherList="teacherList"></School-teach>
     <School-title Schooltitle="学员感言"></School-title>
     <School-student></School-student>
     <School-title Schooltitle="学员作品"></School-title>
     <Student-work :Worklist="Worklist"></Student-work>
  </div>
</template>

<script>
const SchoolTitle=()=>import(/* webpackChunkName: "SchoolView" */ "@/components/SchoolTitle.vue");
const SchoolClass=()=>import(/* webpackChunkName: "SchoolClass" */ "@/components/SchoolClass.vue");
const SchoolTeach=()=>import(/* webpackChunkName: "SchoolTeach" */ "@/components/SchoolTeach.vue");
const SchoolStudent=()=>import(/* webpackChunkName: "SchoolStudent" */ "@/components/SchoolStudent.vue");
const StudentWork=()=>import(/* webpackChunkName: "StudentWork" */ "@/components/StudentWork.vue");
export default {
  name: 'LqbdemoWebSchoolView',
  components:{
    SchoolTitle,
    SchoolClass,
    SchoolTeach,
    SchoolStudent,
    StudentWork
  },

  data() {
    return {
      fontList: [
        {
          title: "直播课",
          src: "h-submenu20.png",
        },
        {
          title: "录播课",
          src: "h-submenu_2205.png",
        },
        {
          title: "企业荣誉",
          src: "h-submenu18.png",
        },
        {
          title: "学员作品",
          src: "h-submenu12.png",
        },
        {
          title: "学员荣誉",
          src: "h-submenu19.png",
        },
        {
          title: "怎样学习",
          src: "h-submenu10.png",
        },
      ],
      ClassList:[],
      teacherList:[],
      Worklist:[],
    };
  },
 async created() {
  const {data:{data}}=await this.$http({
      methods:"GET",
      url:"/lqb/api/school/professionals",
      params:{
        limit:4,
      }
    });
    this.ClassList=data;
    console.log(this.ClassList);

    const teacher= await this.$http({
      methods:"get",
      url:"/lqb/api/school/teacher",
      params:{
        limit:3,
      }
    });
    this.teacherList=teacher.data.data;

    this.$http({
      methods:"get",
      url:"/lqb/api/school/works",
      params:{
        limit:9,
        sort:'-top_weight',
      }
    }).then(({data:{data}})=>{
      this.Worklist=data;
    })
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>
.school{
  background-color: #f4f4f4;
  width: 100vw;
  overflow-y: scroll;
  height: 80vh;
  .banner{
    background-color: white;
    margin: auto;
    text-align: center;
  >img{
    width: 329px;
    height: 66px;
    border-radius: 50px;
  }
  }
  .menu{
    background-color: white;
    height: 96px;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    // justify-content: center;
    >span{
      box-sizing: border-box;
      width: 62px;
      height: 69px;
      display: flex;
      flex-direction: column;
      align-items: center;
      >img{
        width: 43px;
        height: 43px;
      }
      >p{
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
}
</style>